<template>
  <div class="page-header-index-wide">
    <a-row :gutter="24">
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="客户总数" type="alipay-outlined" :total="MerchantData.MerchantCount">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="客户总充值金额" :total="'￥'+MerchantData.totalrecharge">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="8" :style="{ marginBottom: '24px' }">
        <chart-card :loading="loading" title="客户总余额" :total="'￥'+MerchantData.totalaccountmoney">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
    <div style="text-align:right;margin-top:15px">
      <a-select allowClear  @change="MerchantChange" show-search option-filter-prop="children" v-model="queryParam.Id" placeholder="请选择客户" style="width:200px" :filter-option="filterOption">
            <a-select-option v-for="(item, index) in MerchantList" :key="index" :value="item.value">
              {{ item.text }}
              </a-select-option>
          </a-select>
    </div>
    <a-table
      ref="table"
      :columns="columns"
      :rowKey="row => row.Id"
      :dataSource="data"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :bordered="false"
      size="middle"
    >
      
    </a-table>
  </div>
</template>
<script>
import ChartCard from '@/components/ChartCard/ChartCard'
const columns = [
  { title: '客户企业名称', dataIndex: 'MerchantName', width: '25%' },
  { title: '充值交易笔数', dataIndex: 'rechargecount', width: '25%' },
  { title: '代发交易金额', dataIndex: 'batchcount', width: '25%' },
  { title: '账户余额', dataIndex: 'money', width: '20%' },
]
export default {
  components: {
    ChartCard,
  },
  data() {
    return {
      data:[],
      pagination: {
        current: 1,
        pageSize: 5,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      sorter: { field: 'Id', order: 'asc' },
      loading: false,
      columns,
      loading: false,
      MerchantData :{},
      queryParam: {Id:""},
      filters: {},
      selectedRowKeys: [],
      MerchantList:[]
    }
  },
  mounted(){
    this.GetData()
    this.GetMerchant()
  },
  methods:{
    MerchantChange(value){
     this.queryParam.Id = value;
     this.GetData()
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    GetData(){
      
      this.selectedRowKeys = []
      this.loading = true
      this.$http
        .post('/Base_Manage/Home/GetMerchantInfo', {
          
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: this.sorter.field || 'Id',
          SortType: this.sorter.order,
          Search: this.queryParam,
          ...this.filters
        })
        .then(resJson => {
          this.MerchantData = resJson.Data
          this.loading = false
           this.data = resJson.Data.dataresult
          const pagination = { ...this.pagination }
          pagination.total = resJson.Data.Total
          this.pagination = pagination
        })
    },
    GetMerchant(){
      this.$http.post("/Base_Manage/Home/GetMerchant_Select").then((res)=>{
        this.MerchantList = res.Data
      })
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.GetData()
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
  }
}
</script>
